<!--
 * @Description: 新建场景页面中间画布
 * @Author: 崔堂袁
 * @Date: 2021-04-21 12:53:27
 * @LastEditTime: 2021-05-08 21:28:08
-->
<template>
  <a-spin :spinning="spinning">
    <div class="content">
      <!-- 画布 -->
      <div id="newDesignCanvas"></div>
      <!-- 还原相机位置按钮 -->
      <div class="reSetCamera"
           @click="resetCamera">
        <AimOutlined />
      </div>
      <!-- programName弹框 -->
      <a-modal v-model:visible="isShowProgramNameModel"
               :title="$t('lang.newScenePage.setProgramNameTitle')"
               :okText="$t('lang.newScenePage.determine')"
               :cancelText="$t('lang.newScenePage.cancel')"
               @ok="handleOk">
        <a-input v-model:value="programName" />
        <span style="color: red;"
              v-if="programNameIsNull">{{$t('lang.newScenePage.programNameIsNull')}}</span>
        <span style="color: red;"
              v-if="programNameExisted">{{$t('lang.newScenePage.programNameExisted')}}</span>
      </a-modal>
    </div>
  </a-spin>
</template>

<script>
import { AimOutlined } from '@ant-design/icons-vue'
import model from '@/views/0level/modelStyle'
import { ref, toRaw } from '@vue/reactivity'
import { reactive, onMounted, getCurrentInstance, computed } from 'vue'
// 引入three.js引擎
import * as THREE from 'three'

// 引入相机控制组件
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 引入可视化平移控件
import { TransformControls } from 'three/examples/jsm/controls/TransformControls'
// 引入拖拽控件
// import { DragControls } from 'three/examples/jsm/controls/DragControls'
import { useStore } from 'vuex'
export default {
  components: {
    AimOutlined
  },
  setup () {
    const store = useStore()
    const { proxy } = getCurrentInstance()

    const data = reactive({
      scene: null, // 场景
      camera: null, // 相机
      renderer: null, // 渲染器
      width: 0, // 窗口宽度
      height: 0, // 窗口高度
      mesh: null,
      orbitControls: null, // 相机控制器
      transformControls: null, // 可视化控件
      dragControls: null, // 拖拽控件
      axesHelper: null, // 空间坐标系
      grid: null, // 辅助网格面
      mainCanvas: null, // 画布
      mouse: null, // 鼠标位置
      raycaster: null, // 从鼠标点击的位置发出射线
      intersect: null, // 鼠标选中的对象
      box_hover: null, // 鼠标悬浮对象的包围盒
      box_selected: null // 选中对象的包围盒
    })
    // ------------------------------------------------------初始化-------------------------------------
    const enterStatus = store.state.editOrNewDesignControl.isNewDesign
    onMounted(() => {
      if (enterStatus) { // true, 新建场景
        initScene() // 初始化场景对象
        initCamera() // 初始化相机对象
        initRenderer() // 初始化渲染器对象
        initLight() // 初始化一个点光源和环境光
        mouseListener() // 添加鼠标事件监听器
        initControls() // 初始化控制器
        helpers() // 初始化辅助工具
        commitComponents() // 保存三大组件
        render() // 渲染
      } else { // false, 编辑场景
        const strScene = store.state.threeComponents._strScene
        const jsonScene = JSON.parse(strScene)
        const loader = new THREE.ObjectLoader()
        const newScene = loader.parse(jsonScene)
        data.scene = newScene
        initCamera() // 初始化相机对象
        initRenderer() // 初始化渲染器对象
        mouseListener() // 添加鼠标事件监听器
        initControls() // 初始化控制器
        helpers() // 初始化辅助工具
        commitComponents() // 保存三大组件
        render() // 渲染
      }
    })
    // -----------------------------------------------------初始化函数------------------------------------------
    const initScene = () => {
      data.scene = new THREE.Scene()
      data.scene.position.set(0, 0, 0)
      // data.scene.fog = new THREE.Fog(0xffffff, 0.015, 1000)
    }
    const initCamera = () => {
      data.width = document.getElementById('newDesignCanvas').offsetWidth
      data.height = document.getElementById('newDesignCanvas').offsetHeight
      data.camera = new THREE.PerspectiveCamera(75, data.width / data.height, 1, 100000) // 创建一个透视相机
      data.camera.position.set(200, 300, 200) // 设置相机位置
      data.camera.lookAt(0, 0, 0) // 设置相机的方向
    }
    const initRenderer = () => {
      data.renderer = new THREE.WebGLRenderer({
        preserveDrawingBuffer: true // 如果想保存three.js canvas画布上的信息，注意设置preserveDrawingBuffer
      })
      data.renderer.setSize(data.width, data.height) // 设置渲染区域的尺寸
      data.renderer.setClearColor(0x1e1e1e, 1) // 设置背景颜色
      document.getElementById('newDesignCanvas').appendChild(data.renderer.domElement) // newDesignCanvas元素中插入canvas对象
    }
    const initLight = () => {
      const pointLight = new THREE.PointLight(0xffffff) // 点光源
      pointLight.position.set(400, 200, 300) // 设置点光源位置
      data.scene.add(pointLight)
      const ambientLight = new THREE.AmbientLight(0x444444) // 环境光
      data.scene.add(ambientLight)
    }
    const initControls = () => {
      // 添加相机控件
      data.orbitControls = new OrbitControls(data.camera, data.renderer.domElement)
      // 添加可视化平移控件
      const transformControls = data.scene.getObjectByName('transformControls')
      if (transformControls) data.scene.remove(transformControls)
      data.transformControls = new TransformControls(data.camera, data.renderer.domElement)
      data.transformControls.name = 'transformControls'
      data.transformControls.addEventListener('mouseDown', () => {
        data.orbitControls.enabled = false // 平移开始禁用相机控件
      })
      data.transformControls.addEventListener('mouseUp', () => {
        data.orbitControls.enabled = true // 平移结束启用相机控件
      })
      data.transformControls.setMode('translate') // 平移（默认）
      // data.transformControls.setMode('rotate') // 旋转
      // data.transformControls.setMode('scale') // 缩放
      data.transformControls.setSize(1) // 设置可视化控件的大小
      // data.scene.add(data.transformControls)
    }
    const helpers = () => {
      // 删除可能已经存在的
      const axesHelper = data.scene.getObjectByName('axesHelper')
      const grid = data.scene.getObjectByName('grid')
      if (axesHelper) data.scene.remove(axesHelper)
      if (grid) data.scene.remove(grid)
      // 添加空间坐标系,参数250表示坐标系大小 可以根据场景大小去设置
      data.axesHelper = new THREE.AxesHelper(250)
      data.axesHelper.name = 'axesHelper'
      data.scene.add(data.axesHelper)
      // 添加辅助网格面
      data.grid = new THREE.GridHelper(10000, 100, 0x74c149, 0x666666)
      data.grid.name = 'grid'
      data.scene.add(data.grid)
    }
    // 保存三大组件
    const commitComponents = () => {
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateCamera', data.camera)
      store.commit('threeComponents/updateRenderer', data.renderer)
    }
    const render = () => {
      const _scene = computed(() => toRaw(store.state.threeComponents._scene))
      const _camera = computed(() => toRaw(store.state.threeComponents._camera))
      const _renderer = computed(() => toRaw(store.state.threeComponents._renderer))
      _renderer.value.render(_scene.value, _camera.value)
      requestAnimationFrame(render)
    }

    // --------------------------------------------------------画布窗口自适应--------------------------------------------------
    // onresize 事件会在窗口被调整大小时发生
    window.onresize = function () {
      data.width = document.getElementById('newDesignCanvas').offsetWidth
      data.height = document.getElementById('newDesignCanvas').offsetHeight
      data.renderer.setSize(data.width, data.height) // 重置渲染器输出画布canvas尺寸
      data.camera.aspect = data.width / data.height // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
      // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
      // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
      // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
      data.camera.updateProjectionMatrix()
    }
    // ---------------------------------------------------------鼠标事件-----------------------------
    const mouseListener = () => {
      data.mainCanvas = document.getElementById('newDesignCanvas')
      data.mouse = new THREE.Vector2()
      data.raycaster = new THREE.Raycaster()
      data.mainCanvas.addEventListener('click', onDocumentClick)
      data.mainCanvas.addEventListener('mousemove', onDocumentMouseMove)
    }
    // 单击
    const onDocumentClick = (event) => {
      event.preventDefault() // 阻止发生默认行为
      data.scene.remove(data.box_selected)
      data.mouse.x = (event.clientX / data.width) * 2 - 1
      data.mouse.y = -(event.clientY / data.height) * 2 + 1
      data.raycaster.setFromCamera(data.mouse, data.camera)
      const intersects = data.raycaster.intersectObjects(data.scene.children)
      if (intersects.length !== 0 && intersects[0].object.isMesh) {
        data.intersect = intersects[0].object
        data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
        data.scene.add(data.transformControls)
        store.commit('threeComponents/updateIntersect', data.intersect)
        toAttributes()
      }
    }
    // hover
    const onDocumentMouseMove = (event) => {
      event.preventDefault() // 阻止发生默认行为
      data.scene.remove(data.box_hover)
      data.mouse.x = (event.clientX / data.width) * 2 - 1
      data.mouse.y = -(event.clientY / data.height) * 2 + 1
      data.raycaster.setFromCamera(data.mouse, data.camera)
      const intersects = data.raycaster.intersectObjects(data.scene.children)
      if (intersects.length !== 0 && intersects[0].object.isMesh) {
        data.box_hover = new THREE.BoxHelper(intersects[0].object, 0xffff00)
        data.scene.add(data.box_hover)
      } else {
        data.scene.remove(data.box_hover)
      }
    }
    // ---------------------------------------------------------还原相机位置----------------------------------
    const resetCamera = () => {
      data.scene.remove(data.camera, data.controls, data.axesHelper, data.grid)
      initCamera()
      initControls()
      helpers()
      commitComponents()
    }
    // ------------------------选中模型对象跳转属性-------------------
    const toAttributes = () => {
      proxy.$emit('toAttributes')
    }
    // ----------------------------------------------添加模型------------------------------------------------
    const createModel = () => {
      const modelIndex = store.state.modelData.modelIndex
      if (modelIndex === model.CIRCLE) addCircle() // 添加圆形
      if (modelIndex === model.PLANE) addPlane() // 添加平面
      if (modelIndex === model.RING) addRing() // 添加环面
      if (modelIndex === model.BOX) addBox() // 添加长方体
      if (modelIndex === model.SPHERE) addSphere() // 添加球体
      if (modelIndex === model.CYLINDER) addCylinder() // 添加圆柱体
      if (modelIndex === model.CONE) addCone() // 添加锥体
      if (modelIndex === model.TORUS) addTorus() // 添加甜甜圈
      if (modelIndex === model.TORUSKNOT) addTorusKnot() // 添加环状扭结
    }
    // 创建各类对象的函数
    const addCircle = () => {
      const name = store.state.modelData.name
      const radius = store.state.modelData.radius
      const segments = store.state.modelData.segments
      const colorValue = store.state.modelData.colorValue
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const circle = new THREE.CircleGeometry(radius * 1, segments * 1)
      const material = new THREE.MeshStandardMaterial({
        color: colorValue
      })
      material.side = THREE.DoubleSide
      const meshCircle = new THREE.Mesh(circle, material)
      meshCircle.position.set(position.x * 1, position.y * 1, position.z * 1)
      meshCircle.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      meshCircle.name = name
      data.scene.add(meshCircle)
      data.intersect = meshCircle
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addPlane = () => {
      const name = store.state.modelData.name
      const width = store.state.modelData.width
      const height = store.state.modelData.height
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const planeGeometry = new THREE.PlaneGeometry(width * 1, height * 1)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      material.side = THREE.DoubleSide
      const planeMesh = new THREE.Mesh(planeGeometry, material)
      planeMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      planeMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      planeMesh.name = name
      data.scene.add(planeMesh)
      data.intersect = planeMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addRing = () => {
      const name = store.state.modelData.name
      const innerRadius = store.state.modelData.innerRadius
      const outerRadius = store.state.modelData.outerRadius
      const ringSegments = store.state.modelData.ringSegments
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const ringGeometry = new THREE.RingGeometry(innerRadius * 1, outerRadius * 1, ringSegments * 1)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      material.side = THREE.DoubleSide
      const ringMesh = new THREE.Mesh(ringGeometry, material)
      ringMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      ringMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      ringMesh.name = name
      data.scene.add(ringMesh)
      data.intersect = ringMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addBox = () => {
      const name = store.state.modelData.name
      const width = store.state.modelData.width
      const height = store.state.modelData.height
      const depth = store.state.modelData.depth
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const boxGeometry = new THREE.BoxGeometry(width * 1, height * 1, depth * 1)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      // material.side = THREE.DoubleSide
      const boxMesh = new THREE.Mesh(boxGeometry, material)
      boxMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      boxMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      boxMesh.name = name
      data.scene.add(boxMesh)
      data.intersect = boxMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addSphere = () => {
      const name = store.state.modelData.name
      const radius = store.state.modelData.radius
      const sphereWidthSegment = store.state.modelData.sphereWidthSegment
      const sphereHeightSegment = store.state.modelData.sphereHeightSegment
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const sphereGeometry = new THREE.SphereGeometry(radius * 1, sphereWidthSegment * 1, sphereHeightSegment * 1)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      // material.side = THREE.DoubleSide
      const sphereMesh = new THREE.Mesh(sphereGeometry, material)
      sphereMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      sphereMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      sphereMesh.name = name
      data.scene.add(sphereMesh)
      data.intersect = sphereMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addCylinder = () => {
      const name = store.state.modelData.name
      const radiusTop = store.state.modelData.radiusTop
      const radiusBottom = store.state.modelData.radiusBottom
      const height = store.state.modelData.height
      const radialSegments = store.state.modelData.radialSegments
      const heightSegments = store.state.modelData.heightSegments
      const openEnded = store.state.modelData.openEnded
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const cylinderGeometry = new THREE.CylinderGeometry(radiusTop * 1, radiusBottom * 1, height * 1, radialSegments * 1, heightSegments * 1, openEnded)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      material.side = THREE.DoubleSide
      const cylinderMesh = new THREE.Mesh(cylinderGeometry, material)
      cylinderMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      cylinderMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      cylinderMesh.name = name
      data.scene.add(cylinderMesh)
      data.intersect = cylinderMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addCone = () => {
      const name = store.state.modelData.name
      const radius = store.state.modelData.radius
      const height = store.state.modelData.height
      const radialSegments = store.state.modelData.radialSegments
      const heightSegments = store.state.modelData.heightSegments
      const openEnded = store.state.modelData.openEnded
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const coneGeometry = new THREE.ConeGeometry(radius * 1, height * 1, radialSegments * 1, heightSegments * 1, openEnded)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      material.side = THREE.DoubleSide
      const coneMesh = new THREE.Mesh(coneGeometry, material)
      coneMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      coneMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      coneMesh.name = name
      data.scene.add(coneMesh)
      data.intersect = coneMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addTorus = () => {
      const name = store.state.modelData.name
      const circleRadius = store.state.modelData.circleRadius
      const tube = store.state.modelData.tube
      const circleRadialSegments = store.state.modelData.circleRadialSegments
      const tubularSegments = store.state.modelData.tubularSegments
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const torusGeometry = new THREE.TorusGeometry(circleRadius * 1, tube * 1, circleRadialSegments * 1, tubularSegments * 1)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      material.side = THREE.DoubleSide
      const torusMesh = new THREE.Mesh(torusGeometry, material)
      torusMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      torusMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      torusMesh.name = name
      data.scene.add(torusMesh)
      data.intersect = torusMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }
    const addTorusKnot = () => {
      const name = store.state.modelData.name
      const circleRadius = store.state.modelData.circleRadius
      const tube = store.state.modelData.tube
      const circleRadialSegments = store.state.modelData.circleRadialSegments
      const tubularSegments = store.state.modelData.tubularSegments
      const p = store.state.modelData.p
      const q = store.state.modelData.q
      const color = store.state.modelData.color
      const position = store.state.modelData.position
      const rotate = store.state.modelData.rotate
      const torusKnotGeometry = new THREE.TorusKnotGeometry(circleRadius * 1, tube * 1, circleRadialSegments * 1, tubularSegments * 1, p * 1, q * 1)
      const material = new THREE.MeshStandardMaterial({
        color: color
      })
      material.side = THREE.DoubleSide
      const torusKnotMesh = new THREE.Mesh(torusKnotGeometry, material)
      torusKnotMesh.position.set(position.x * 1, position.y * 1, position.z * 1)
      torusKnotMesh.rotation.set((rotate.x * 1) * (Math.PI / 180), (rotate.y * 1) * (Math.PI / 180), (rotate.z * 1) * (Math.PI / 180))
      torusKnotMesh.name = name
      data.scene.add(torusKnotMesh)
      data.intersect = torusKnotMesh
      data.transformControls.attach(data.intersect) // 绑定选中对象与可视化控件
      data.scene.add(data.transformControls)
      store.commit('threeComponents/updateScene', data.scene)
      store.commit('threeComponents/updateIntersect', data.intersect)
    }

    // ----------------------------保存-------------------------
    const spinning = ref(false)
    const programName = ref(null)
    const isShowProgramNameModel = ref(false) // 设置项目名弹框控制变量
    const programNameIsNull = ref(false)
    const programNameExisted = ref(false)
    const saveThreeComponents = () => {
      if (enterStatus) { // true, 新建
        isShowProgramNameModel.value = true
      } else { // false, 编辑, 不用重新设置项目名字
        spinning.value = true // 打开正在加载效果
        updateProgramData()
      }
    }
    const handleOk = () => {
      spinning.value = true // 打开正在加载效果
      const canvas = data.renderer.domElement
      const strPhoto = canvas.toDataURL('image/png')
      const userAccount = sessionStorage.getItem('userAccount')
      const currentScene = toRaw(store.state.threeComponents._scene)
      const strScene = JSON.stringify(currentScene)
      const willSaveData = {
        userAccount,
        programName: programName.value.trim(),
        strScene,
        strPhoto
      }
      if (!(programName.value)) { // 若用户没有输入项目名
        programNameIsNull.value = true
        return
      } else if (!(programName.value.trim())) { // 若用户输入的是空格, 也当没有输入处理
        programNameIsNull.value = true
        return
      }
      // 查询是否存在同名的情况
      proxy.$http.post('/api/user/findUserData', { userAccount: willSaveData.userAccount, programName: programName.value.trim() })
        .then((res) => {
          const result = res.data
          if (result === 'existedProgramName') {
            programNameExisted.value = true
          } else if (result === 'allowToAdd') {
            isShowProgramNameModel.value = false
            proxy.$http.post('/api/user/saveData', willSaveData)
              .then((res) => {
                if (res.data.errno) {
                  proxy.$emit('saveStatus', 'fail')
                  spinning.value = false
                } else {
                  proxy.$emit('saveStatus', 'success')
                  spinning.value = false
                }
              })
          }
        })
    }
    const updateProgramData = () => {
      const canvas = data.renderer.domElement
      const strPhoto = canvas.toDataURL('image/png')
      const userAccount = sessionStorage.getItem('userAccount')
      const currentScene = toRaw(store.state.threeComponents._scene)
      const strScene = JSON.stringify(currentScene)
      const willUpdataData = {
        userAccount,
        programName: store.state.editOrNewDesignControl.programName,
        strScene,
        strPhoto
      }
      proxy.$http.post('/api/user/updateUserData', willUpdataData)
        .then((res) => {
          if (res.data.errno) {
            proxy.$emit('saveStatus', 'fail')
            spinning.value = false
          } else {
            proxy.$emit('saveStatus', 'success')
            spinning.value = false
          }
        })
    }

    return {
      resetCamera,
      createModel,
      saveThreeComponents,
      isShowProgramNameModel,
      handleOk,
      programName,
      spinning,
      programNameExisted,
      programNameIsNull
    }
  }
}
</script>

<style lang='less' scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  #newDesignCanvas {
    width: 100%;
    height: 100%;
  }
  .reSetCamera {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    cursor: pointer;
    color: @fontColor;
    position: fixed;
    right: 55px;
    bottom: 20px;
  }
}
</style>
